<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        html,body,#header{
            background: transparent;
        }
        #selectList{
            position: absolute;
            /*position: relative;*/
            top: 40%;
            left: 0;
            z-index: 4;
            width: 97px;
            height: 40%;
            overflow: scroll;
            /*box-shadow: #000 0 0 30px;*/
            /*box-shadow,兼容性不好*/
        }
        #selectList .selectListArea{
            width: 97px;
            height:40px;
            display: block;
            color: #FFF;
            background: url(../../res/drawable-xhdpi/title_bar_bg.9.png) center center repeat-x;
            background-size: 19px 40px;
            line-height: 40px;
            text-align: center;
            /*position: relative;*/
            /*z-index: 4;*/
        }
        #selectList .selectListArea:active{
            background: url(../../res/drawable-xhdpi/title_bar_bg_press.9.png) center center repeat-x;
            background-size: 19px 40px;
            color: #F4B800;
        }
        #fast_city_list_wrap{
            position: absolute;
            z-index: 3;
            width: 100%;
            height: 100%; 
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <ul id="selectList" onclick="api.closeFrame({name:'selectarea'});" tapmode>
                <li class="selectListArea" tapmode>东城</li>
                <li class="selectListArea" tapmode>房山</li>
                <li class="selectListArea" tapmode>通州</li>
                <li class="selectListArea" tapmode>顺义</li>
                <li class="selectListArea" tapmode>西城</li>
                <li class="selectListArea" tapmode>昌平</li>
                <li class="selectListArea" tapmode>大兴</li>
                <li class="selectListArea" tapmode>平谷</li>
                <li class="selectListArea" tapmode>怀柔</li>
                <li class="selectListArea" tapmode>密云</li>
                <li class="selectListArea" tapmode>延庆</li>
                <li class="selectListArea" tapmode>朝阳</li>
                <li class="selectListArea" tapmode>丰台</li>
                <li class="selectListArea" tapmode>石景山</li>
                <li class="selectListArea" tapmode>海淀</li>
                <li class="selectListArea" tapmode>门头沟</li>
            </ul>
        </div>
        <div id="fast_city_list_wrap" onclick="api.closeFrame({name:'selectarea'});" tapmode>
        
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">

    apiready = function(){
        
        var header = $api.byId('header');
        $api.fixStatusBar(header); 
        var headerPos = $api.offset(header);
        var wW = api.winWidth;
        var wH = api.winHeight;
        var selectList = $api.byId('selectList');
        var height = api.pageParam.height;
        $api.css(selectList,'height:' +(wH*0.6-height)+'px');

        api.bringFrameToFront({
            from: 'selectarea'
        });

    };
</script>
</html>